@import "../var";
@import "../mixin";
@import "../module/searchList/searchList";

.integral-mall-page {
  .integral-mall-hd {
    width: 100%;
    height: px(219);
    position: relative;
    z-index: 1;
    overflow: hidden;
    @include calc(padding,16,16,0);
    .integral-mall-bg {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: px(30);
      background-repeat: no-repeat;
      background-size: 150% 150%;
      background-position: center center;
      filter: blur(10px);
      &:after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(0,0,0,.12);
      }
    }
    .integral-mall-top {
      width: 100%;
      height: px(28);
      font-size: 0;
      position: absolute;
      top: px(16);
      left: px(18);
      .searchbox {
        width: px(309);
        height: px(28);
        font-size: px(12);
        margin-right: px(10);
        display: inline-block;
        vertical-align: middle;
        input {
          width: 100%;
          height: 100%;
          padding-left: px(29);
          border: none;
          border-radius: px(28);
          background-color: $clr-white;
        }
        .search-icon-tip {
          width: px(14);
          height: px(14);
          font-size: px(14);
          color: $clr-gc;
          position: absolute;
          top: 1px;
          bottom: 1px;
          left: px(9);
          margin: auto;
          svg {
            vertical-align: top;
          }
        }
      }
      .classify-tag {
        width: px(18);
        height: px(18);
        font-size: px(18);
        color: $clr-white;
        display: inline-block;
        vertical-align: middle;
        svg {
          vertical-align: top;
        }
      }
    }
    .integral-mall-swiper {
      height: px(165);
      position: absolute;
      top: px(54);
      left: px(16);
      right: px(16);
      border-radius: px(8);
      z-index: 2;
      overflow: hidden;
      img {
        border-radius: px(8);
      }
    }
    .integral-mall-bottom {
      width: 100%;
      height: px(70);
      background-color: $clr-white;
      position: absolute;
      bottom: 0;
      left: 0;
      border-radius: 90% 90% 0 0;
    }
  }
  .integral-mall-tab {
    background-color: $clr-white;
    .tab-list {
      @include calc(padding,14,16,0);
      overflow: hidden;
      li {
        width: px(108);
        height: px(56);
        border-radius: px(8);
        margin-right: px(9);
        float: left;
        a {
          display: block;
          position: relative;
          p {
            height: px(18);
            line-height: px(18);
            font-size: px(13);
            font-weight: bold;
            color: $clr-g4;
            position: absolute;
            top: px(8);
            left: px(10);
          }
          img {
            width: 100%;
            height: 100%;
            display: block;
          }
        }
      }
      &>:last-child {
        margin-right: px(0);
      }
    }
  }
  .integral-mall-nav {
    padding-top: px(8);
    background-color: $clr-white;
    .nav-box {
      .gzl-navbar {
        .gzl-navbar__item {
          &.active {
            &:after {
              width: px(30);
              bottom: 0;
            }
          }
        }
      }
    }
  }
  .integral-mall-type {
    padding: px(0) px(0) px(10);
    background: $clr-bg;
  }
  .integral-mall-list {
    display: none;
    overflow: hidden;
    .list-item {
      width: px(172);
      height: px(253);
      margin: px(10) px(0) px(0) px(10);
      padding: px(21) px(0) px(17);
      background-color: $clr-white;
      border-radius: px(8);
      overflow: hidden;
      float: left;
      & > a {
        img {
          width: px(172);
          height: px(151);
          display: block;
          margin-bottom: px(10);
        }
      }
      .prod-name {
        height: px(20);
        line-height: px(20);
        font-size: px(14);
        padding: px(0) px(16);
        margin-bottom: px(10);
        @include ellipsis;
      }
      .prod-prc {
        font-size: 0;
        text-align: center;
        .price {
          height: px(24);
          line-height: px(24);
          font-size: px(20);
          color: #FF8C00;
          // color: $clr-main;
          display: inline-block;
          vertical-align: bottom;
          margin-right: px(4);
        }
        .text {
          height: px(14);
          line-height: px(14);
          font-size: px(12);
          display: inline-block;
          vertical-align: bottom;
        }
      }
    }
  }
}